<script setup lang="ts">
import {ref} from 'vue'
import {getTableList} from '@/mock';
// 筛选项信息
const formValue = ref({});
const formTableProps = ref({
  searchForm: {
    searchList: [
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        devAttrs: {
          placeholder: '请输入姓名'
        }
      },
      {
        label: '年龄',
        key: 'age',
        type: 'input',
        devAttrs: {
          placeholder: '请输入年龄'
        }
      }
    ],
    elFormAttrs: {
      labelWidth: '60'
    },
    formValue
  },
  searchTable: {
    columns: [
      {
        label: 'Id',
        prop: 'id',
        width: '100',
        align: 'center',
      },
      {
        label: '姓名',
        prop: 'name',
        width: '200',
        align: 'center',
      },
      {
        label: '年龄',
        prop: 'age',
        minWidth: '400',
        align: 'center',
      },
      {
        label: '省份',
        prop: 'address',
        fixed: 'right',
        align: 'center',
        width: '300',
        tips: '学生所在的省份',
      }
    ],
    query: formValue,
    api: getTableList,
    openSelection: true,
    elTableAttrs: {
      'scrollbar-always-on': true
    }
  }
});

const devElFormTableRef = ref<any>(null);

const chooseData = ref({
  allSelectId:[],
  allSelectData:[]
});

/**
 * 勾选项变化
 * @param val
 */
const checkChange = (val:any)=>{
  chooseData.value = val;
}

/**
 * 清除所有勾选项
 */
const clearAllSelection = () => {
  if(devElFormTableRef.value){
    devElFormTableRef.value.devSearchTableRef.clearAllSelection();
  }
}
</script>

<template>
  <div style="margin-bottom: 10px">
    <h4>为了方便展示所勾选的数据信息</h4>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <p>已勾选的id</p>
            <p>{{chooseData.allSelectId}}</p>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <p>已勾选的数据</p>
            <p>{{chooseData.allSelectData}}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <dev-form-table
      v-bind="formTableProps"
      ref="devElFormTableRef" @check-change="checkChange">
    <template #tableTop>
      <el-button @click="clearAllSelection" :disabled="chooseData.allSelectId.length === 0" type="primary" style="margin-bottom: 10px">清除勾选项</el-button>
    </template>
  </dev-form-table>
</template>
